<style type="text/css">
    .gambar-nav {
    }
    .gambarpilar {
        height: 300px;
        width: 311px;
        background-image: url("<?php echo res_url("img/5pilar_bg.png"); ?>");
        display: block;
        margin: 0px auto;
    }
    .layerpilar {
        height: 100%;
        width: 100%;
        display: block;
    }

    <?php
    if ($pilarlayer) {
        echo ".layerpilar { background-image: url('" . res_url("img/" . $pilarlayer) . "'); }";
    }
    ?>

    .layerpilar-hover {
        height: 100%;
        width: 100%;
        display: block;
    }

    .gambarpilar * a {
        height: 120px;
        width: 40px;
        position: relative;
        display: block;
        float: left;
    }

    a.pilar1 {
        top: 110px;
        left: 53px;
    }
    a.pilar2 {
        top: 110px;
        left: 50px;
    }
    a.pilar3 {
        top: 110px;
        left: 53px;
    }
    a.pilar4 {
        top: 110px;
        left: 53px;
    }
    a.pilar5 {
        top: 110px;
        left: 53px;
    }
    
    
    .textbox {
        display: block;
        width: 650px;
        height: 400px;
        border: 1px solid black;
    }

    .related {
        margin: 2em 0px;
        display: block;
        width: 650px;
        height: 200px;
        border: 1px solid black;
    }
</style>
<div class="side-content">
    <div class="title"><?php echo $pageTitle; ?></div>
    <div class="gambar-nav">
        <div class="gambarpilar">
            <div class="layerpilar">
                <div class="layerpilar-hover">
                    <a title="Pilar 1 : Dokter Puskesmas" class="pilar1" href="<?php echo site_url("tentangkami/pilarps/1"); ?>"><span></span></a>
                    <a title="Pilar 2 : Bidan Desa" class="pilar2" href="<?php echo site_url("tentangkami/pilarps/2"); ?>"><span></span></a>
                    <a title="Pilar 3 : Air Bersih" class="pilar3" href="<?php echo site_url("tentangkami/pilarps/3"); ?>"><span></span></a>
                    <a title="Pilar 4 : Sanitasi" class="pilar4" href="<?php echo site_url("tentangkami/pilarps/4"); ?>"><span></span></a>
                    <a title="Pilar 5 : Gizi" class="pilar5" href="<?php echo site_url("tentangkami/pilarps/5"); ?>"><span></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="textbox"><?php echo $pageTitle; ?></div>
</div>
<div class="side-nav">
    <?php $this->view("tentangkami/sidenav", array("navdata" => $navData)); ?>
</div>
<script type="text/javascript">
    $(".gambar-nav").ready(function() {
        $(".pilar1").hover(function() {
            $(".layerpilar-hover").css("background-image", "url('<?php echo res_url("img/5pilar_hl"); ?>1.png')");
        }, function() {
            $(".layerpilar-hover").css("background-image", "none");
        });
        $(".pilar2").hover(function() {
            $(".layerpilar-hover").css("background-image", "url('<?php echo res_url("img/5pilar_hl"); ?>2.png')");
        }, function() {
            $(".layerpilar-hover").css("background-image", "none");
        });
        $(".pilar3").hover(function() {
            $(".layerpilar-hover").css("background-image", "url('<?php echo res_url("img/5pilar_hl"); ?>3.png')");
        }, function() {
            $(".layerpilar-hover").css("background-image", "none");
        });
        $(".pilar4").hover(function() {
            $(".layerpilar-hover").css("background-image", "url('<?php echo res_url("img/5pilar_hl"); ?>4.png')");
        }, function() {
            $(".layerpilar-hover").css("background-image", "none");
        });
        $(".pilar5").hover(function() {
            $(".layerpilar-hover").css("background-image", "url('<?php echo res_url("img/5pilar_hl"); ?>5.png')");
        }, function() {
            $(".layerpilar-hover").css("background-image", "none");
        });

    });
</script>